<template>
    <div>
        <List :til="this.$route.query.til"></List>
        <ul class="content">
            <li v-for="item in goods_list">
                <img :src="item.img" alt="">
                <p> {{ item.title }}</p>
                <div class="hezi">
                    <span>￥{{ item.price }}</span>
                    <span>￥{{ item.old_price }}</span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import { newHome } from './api'
export default {


    data() {
        return {
            goods_list: [],
            
        };
    },

    mounted() {
        this.newHome()
        console.log(this.$route.query)
    },

    methods: {
        newHome() {
            newHome().then(res => {
                console.log(res.data, 'list');
                this.goods_list = res.data.filter(item => item.tabs == this.$route.query.tab)
                console.log(this.goods_list, 'query');
            })
        },
    },
};
</script>

<style scoped lang="scss">
.content {
    display: flex;
    flex-wrap: wrap;

    li {
        width: 48%;
        height: 400px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        background: #fff;
        margin-left: 6px;
        margin-bottom: px;
        margin-top: 10px;

        img {
            width: 100%;
            height: 100%;
        }

        p {
            font-size: 12px;
            color: #303030;
        }

        .hezi {
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;

            span {
                color: #363636;
                font-size: 16px;
            }

            span:nth-of-type(2) {
                font-weight: normal;
                text-decoration: line-through;
                color: #979797;
                font-size: 14px;
            }

        }

    }

}
</style>